<?php
	// $this->start('css');
 //        echo $this->Html->css('jquery-ui/jquery-ui-1.10.3.custom.min');
 //        //echo $this->Html->css('Index/index');        
 //        echo $this->Html->css('jquery.ui.timepicker');
 //    $this->end();
 //    $this->start('script');
	// 	echo $this->Html->script("jquery-1.10.2.min");
 //        echo $this->Html->script("jquery-ui-1.10.3.custom.min");
 //        echo $this->Html->script(array(
 //            "jquery.dataTables.min", 
 //            "jquery.ui.timepicker.min", 
 //            ));
	// $this->end();
    $this->assign('title', "Entrenar Rutas - miBus");
	
	$entrenamiento_url = $this->Html->url(array("controller" => "Predicciones", "action" => "entrenar_ruta"));
	$recorridos_url = $this->Html->url(array("controller" => "Predicciones", "action" => "obtener_recorridos_realizados_ruta", "ext" => "json"));
	
	if ($mensaje != null){
		echo "<h2>".$mensaje."</h2>";
	}
?>
<form method="POST" action="<?php echo $entrenamiento_url; ?>">
	<table>
		<tr>
			<td>Ruta:</td>
			<td>
				<select id="id_ruta_id" name="ruta_id" onchange="ruta_cambiada();">										
					<option value="0">[Seleccione Ruta]</option>
					<?php
					
						foreach ($todas_rutas as $key => $values){
							if ($id_ruta == $values["id_ruta"]){
								echo "<option value=\"".$values["id_ruta"]."\" selected>(".$values["id_ruta"].") - ".$values["nombre_ruta"]."</option>";
							} else {
								echo "<option value=\"".$values["id_ruta"]."\">(".$values["id_ruta"].") - ".$values["nombre_ruta"]."</option>";
							}
						}
					?>
				</select>
			</td>					
			<td><br /></td>
		</tr>
		<tr>
			<td>Min Id Recorrido:</td>
			<td>
				<select id="id_min_recorrido" name="id_recorrido_realizado">										
					<option value="0" selected>[Seleccione Recorrido]</option>					
				</select>
			</td>
			<td>
				<input type="submit" name="entrenar" value="Entrenar">
			</td>				
		</tr>
		
	</table>
</form>
<script type="text/javascript" id="entrenamiento_scripts">
	function limpiar_combobox(combobox){
		var length = combobox.options.length;
		for (i = 0; i < length; i++) {
			combobox.options[i] = null;
		}
		
		combobox.options.length = 0;
	}
	
	function nueva_opcion(valor, texto){
		var extra_opcion = document.createElement('option');
		extra_opcion.text = texto;
		extra_opcion.value = valor;
	
		return extra_opcion;
	}
	
	function ruta_cambiada(){	
		//Ejecutar Ajax para actualizar lista de recorridos...
		var ruta_id = document.getElementById('id_ruta_id').value;
		
		//Actualiza el contenido del combobox
		$.get("<?php echo $recorridos_url; ?>?id_ruta=" + ruta_id, 
			function(data_recorridos){
				var combo_recorridos = document.getElementById('id_min_recorrido');
				limpiar_combobox(combo_recorridos);
				
				combo_recorridos.add(nueva_opcion(0,"[Seleccione Recorrido]"));
				
				for (var i = 0; i < data_recorridos.length; i++){
					combo_recorridos.add(
						nueva_opcion(data_recorridos[i].id_recorrido_realizado, 
									"(" + data_recorridos[i].id_recorrido_realizado + ") - " + data_recorridos[i].fecha_salida)
					);
				}
				
			});
	}
	
<?php
	if ($id_ruta > 0){
		echo "ruta_cambiada();\n";
	}
?>
</script>